<div class="position">
  <div class="position-top">
    <ng-container *ngFor="let top of topPositions">
      <button [fuiPopover]="popover" fuiBtn="primary" fuiBtnOutline>
        {{top}}
      </button>
      <fui-popover #popover [placement]="top">
        <div class="content">
          Popover content
        </div>
      </fui-popover>
    </ng-container>
  </div>

  <div class="position-bottom">
    <ng-container *ngFor="let bottom of bottomPositions">
      <button [fuiPopover]="tooltip" fuiBtn="primary" fuiBtnOutline>
        {{bottom}}
      </button>
      <fui-popover #tooltip [placement]="bottom">
        <div class="content">
          Popover content
        </div>
      </fui-popover>
    </ng-container>
  </div>

  <div class="position-left">
    <ng-container *ngFor="let left of leftPositions">
      <button [fuiPopover]=tooltip fuiBtn="primary" fuiBtnOutline>
        {{left}}
      </button>
      <fui-popover #tooltip [placement]="left">
        <div class="content">
          Popover content
        </div>
      </fui-popover>
    </ng-container>
  </div>

  <div class="position-right">
    <ng-container *ngFor="let right of rightPositions">
      <button [fuiPopover]="tooltip" fuiBtn="primary" fuiBtnOutline>
        {{right}}
      </button>
      <fui-popover #tooltip [placement]="right">
        <div class="content">
          Popover content
        </div>
      </fui-popover>
    </ng-container>
  </div>
</div>
